<template>
<div class="merchant-setting views-container">
    <div class="wlm-form">
        <div class="wlm-form-header">基础设置</div>
        <div class="wlm-form-content">
            <el-form ref="base" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="170px" class="retail-form" label-position="right">
                <el-form-item label="添加店员是否关注公众号">
                    <el-switch active-value="1" inactive-value="2" v-model="formFormatData.formData.is_wechat">
                    </el-switch>
                </el-form-item>
                <el-form-item label="店铺样式">
                   <el-radio-group v-model="formFormatData.formData.store_style" >
                        <el-radio label="1">轮播样式</el-radio>
                        <el-radio label="2">列表样式</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="好店样式">
                   <el-radio-group v-model="formFormatData.formData.good_store_style" >
                        <el-radio label="1">V1样式</el-radio>
                        <el-radio label="2">V2样式</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否隐藏订单管理核销码">
                   <el-radio-group v-model="formFormatData.formData.good_store_code" >
                        <el-radio label="1">关闭</el-radio>
                        <el-radio label="2">开启</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="新版好店列表名称显示">
                    <el-checkbox-group v-model="formFormatData.formData.good_store_name_style" >
                        <el-checkbox v-for="role in roledata" :label="role.value" :key="role.value">
                          {{role.label}}
                          </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div class="wlm-form">
        <div class="wlm-form-header flex-row flex-justify-b flex-align-c">
            <span>入驻设置</span>
            <!-- <el-switch v-model="formFormatData.formData.apply_open" active-value="0" inactive-value="1">
            </el-switch> -->
        </div>
        <div class="wlm-form-content">
            <el-form ref="help" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="170px" class="retail-form" label-position="right">
                <el-form-item label="商家入驻">
                    <el-switch active-value="0" inactive-value="1" v-model="formFormatData.formData.apply_open">
                    </el-switch>
                    <p class="form-help">默认开启，关闭以后商家将无法在前端申请入驻</p>
                </el-form-item>
                <el-form-item label="入驻表单内容" v-show="formFormatData.formData.apply_open=='0'">
                    <div style="width:30%">
                        <div class="table-raido-header flex-row">
                            <div class="table-left">内容</div>
                            <div class="table-mid">是否启用</div>
                        </div>
                        <div class="table-raido-body flex-row">
                            <div class="table-left">店铺名称</div>
                            <div class="table-mid">
                                <el-switch :disabled="true" active-value="1" inactive-value="2" v-model="formFormatData.formData.businessForm.business_name"></el-switch>
                            </div>
                        </div>
                        <div class="table-raido-body flex-row">
                            <div class="table-left">姓名</div>
                            <div class="table-mid">
                                <el-switch :disabled="true" active-value="1" inactive-value="2" v-model="formFormatData.formData.businessForm.name"></el-switch>
                            </div>
                        </div>
                        <div class="table-raido-body flex-row">
                            <div class="table-left">电话</div>
                            <div class="table-mid">
                                <el-switch :disabled="true" active-value="1" inactive-value="2" v-model="formFormatData.formData.businessForm.telephone"></el-switch>
                            </div>
                        </div>
                        <div class="table-raido-body flex-row">
                            <div class="table-left">所在地区</div>
                            <div class="table-mid">
                                <el-switch active-value="1" inactive-value="2" v-model="formFormatData.formData.businessForm.region"></el-switch>
                            </div>
                        </div>
                        <div class="table-raido-body flex-row">
                            <div class="table-left">详细地址</div>
                            <div class="table-mid">
                                <el-switch active-value="1" inactive-value="2" v-model="formFormatData.formData.businessForm.address"></el-switch>
                            </div>
                        </div>
                        <div class="table-raido-body flex-row">
                            <div class="table-left">店铺资质</div>
                            <div class="table-mid">
                                <el-switch active-value="1" inactive-value="2" v-model="formFormatData.formData.businessForm.quaimg"></el-switch>
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="提交申请后跳转页面">
                    <el-radio-group v-model="formFormatData.formData.submit.type">
                        <el-radio label="1">首页</el-radio>
                        <el-radio label="2">个人中心（默认）</el-radio>
                        <el-radio label="3">自定义</el-radio>
                    </el-radio-group>
                    <div v-if="formFormatData.formData.submit.type==3" class="link-box" @click="$refs.chooseLink.toggle()">{{formFormatData.formData.submit.value}}</div>
                    <choose-link ref="chooseLink" :config="chooseLinkConfig" :changeEvt="uploadFileChange"></choose-link>
                </el-form-item>
                <el-form-item label="默认地区" class="city">
                    <div class="flex-row flex-align-c">
                        <city-select :config="initCityList" ref="cityselect" :changeEvt="formFormatFiltersChange"></city-select>
                    </div>
                </el-form-item>
                 <el-form-item label="商家服务协议">
                    <ueditor
                      v-if="isDelay"
                      :ueditorChange="serverInfoChange"
                      :ueditorList="ueditorList"
                      :bindIndex="1"
                      :defaultMsg='defaultMsg2'
                      :config='{initialFrameWidth: null,initialFrameHeight: 350}'
                      ref="by_know"></ueditor>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <!-- <div class="wlm-form">
        <div class="wlm-form-header">商家中心设置</div>
        <div class="wlm-form-content">
            <el-form ref="base" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="170px" class="retail-form" label-position="right">
                <el-form-item label="展示数据类型">
                    <el-checkbox-group v-model="formFormatData.formData.express_type">
                        <el-checkbox label="3">核销数据</el-checkbox>
                        <el-checkbox label="2">自提数据</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

            </el-form>
        </div>
    </div> -->
    <div class="wlm-form">
        <div class="wlm-form-header">商家入驻分享设置</div>
        <div class="wlm-form-content">
            <el-form ref="share" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="180px" class="retail-form" label-position="right">
                <el-form-item label="分享标题">
                    <el-input v-model="formFormatData.formData.share_title" style="width:80%;">
                    </el-input>
                </el-form-item>
                <el-form-item label="模板变量">
                    <div class="flex-row">
                        <p style="margin:0 10px;" class="pointer" @click="handleClipboard('[平台名称]',$event)">[平台名称]</p>
                        <p style="margin:0 10px;" class="pointer" @click="handleClipboard('[用户昵称]',$event)">[用户昵称]</p>
                    </div>
                    <p class="form-help">点击复制</p>
                </el-form-item>
                <el-form-item label="分享描述">
                    <el-input v-model="formFormatData.formData.share_describe" style="width:80%;">
                    </el-input>
                </el-form-item>
                <el-form-item label="模板变量">
                    <div class="flex-row">
                        <p style="margin:0 10px;" class="pointer" @click="handleClipboard('[平台名称]',$event)">[平台名称]</p>
                        <p style="margin:0 10px;" class="pointer" @click="handleClipboard('[用户昵称]',$event)">[用户昵称]</p>
                    </div>
                    <p class="form-help">点击复制</p>
                </el-form-item>
                <el-form-item label="封面图">
                    <choose-files ref="chooseFiles" :config="imgCAConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                    <p class="form-help">大小2M以下,建议尺寸200×200px</p>
                </el-form-item>
                <el-form-item label="小程序封面图">
                    <choose-files ref="chooseFiles" :config="imgCBConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                    <p class="form-help">大小2M以下,建议尺寸500×400px</p>
                </el-form-item>
                <!-- <el-form-item label="分享页面背景图">
                    <choose-files ref="chooseFiles" :config="imgCCConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                    <p class="form-help">建议尺寸750×1300px</p>
                </el-form-item> -->
            </el-form>
        </div>
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="saveForm" type="primary">保存</el-button>
    </div>
</div>
</template>

<script>
import ChooseFiles from '@/components/ChooseFiles/index'
import exceldown from '@/directive/exceldown'
import ueditor from '@/components/Ueditor/index'
import CitySelect from '@/components/CitySelect/index'
import clipboard from '@/utils/clipboard'
import ChooseLink from '@/components/ChooseLink/index'
import {
  getBusiness,
  businessKeep
} from '@/api/merchant'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'MerchantSetting',
  components: {
    ChooseFiles,
    CitySelect,
    ChooseLink,
    ueditor
  },
  directives: {
    exceldown
  },
  data() {
    return {
      roledata:[
      {label:'商家名称',value:'1'},
      {label:'门店名称',value:'2'},
      ],
        isDelay: false,
        defaultMsg2: '',
        ueditorList: [],
      imgCAConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'share_img',
          model: 'img'
        }
      },
      imgCBConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'share_img_sapp',
          model: 'img'
        }
      },
      chooseLinkConfig: {
        type: ['chooseLink'],
        initList: [],
        link_type: '1'
      },

      initCityList: {
        initList: [],
        bindKey: { key: [{ 'name': 'province', type: 'String' }, { 'name': 'city', type: 'String' }, { 'name': 'region', type: 'String' }], model: 'address' }
      },
      formFormatData: {
        key: ['help', 'platform', 'base', 'share'],
        api: {
          editForm: {
            api: getBusiness,
            filters: {
              address: {
                bindInit: ['initCityList']
              },
              img: {
                bindInit: ['imgCAConfig', 'imgCBConfig', 'imgCCConfig']
              }
            },
            params: {
              always: true
            }
          },
          submitForm: businessKeep
        },
        formData: {
          good_store_name_style:['1'],
            agreement: '',
          default_settlement: '',
          withdrawal_type: [],
          province: {},
          city: {},
          region: {},
          share_title: '',
          share_describe: '',
          share_img: [],
          share_img_sapp: [],
          //   share_img_bg: [],
          express_type: [],
          data_mode: '1',
          cash_out_examine:'1',
          money_type:'1',
          balance_cash_out:'1',
          settlement: '1',
          is_wechat: '1',
          store_style: '1',
          withdrawal_rate: '',
          min_withdrawal: '',
          apply_open: '0',
          good_store_style: '1',
          good_store_code: '1',
          submit: { value: '', type: '2' },
          sbumit_url: '',
          businessForm: { business_name: '1', name: '1', telephone: '1', region: '1', address: '1', quaimg: '1' }
        },
        rules: {
          withdrawal_rate: [{
            required: true,
            message: '请输入结算频率',
            trigger: 'blur'
          }]
        }
      }
    }
  },
   mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.isDelay = true
      }, 500)
       })
  },
  methods: {
      serverInfoChange(msg) {
      this.defaultMsg2 = msg
    },
      moneytypebtn(){
          //新版本
          if(this.formFormatData.formData.money_type==2){
               var str = '所有无需审核的提现申请或后台同意打款的申请都将先打款到商家余额，后续打款操作需要在余额提现申请里面同意打款再发放到微信零钱或银行卡！！！';
          }else{
              var str = '所有无需审核的提现申请或后台同意打款的申请都将直接打款到微信零钱或银行卡！！！';
          }

          this.$confirm(str, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.formFormatData.formData.money_type = (this.formFormatData.formData.money_type == 1 ? '1' : '2'); 
                    }).catch(() => {
                        this.formFormatData.formData.money_type = (this.formFormatData.formData.money_type == 1 ? '2' : '1'); 
                    });
          
      },
    saveForm() {
      if (this.formFormatData.formData.express_type.length > 1) {
        this.formFormatData.formData.express_type.map((item, index) => {
          if (item === '0') {
            this.formFormatData.formData.express_type.splice(index, 1)
          }
        })
      }
      if (this.formFormatData.formData.express_type.length === 0) {
        this.formFormatData.formData.express_type = ['0']
      }
      console.log(this.formFormatData.formData, typeof this.formFormatData.formData.express_type, '2')
      this.$nextTick(() => {
        this.formFormatData.formData.agreement = this.defaultMsg2
        this.formFormatSubmit()
      })
    },
    formFormatCallBack(data, type, response) {
      if (type === 'editBeforeForm') {
        console.log(data, 'call')
        const { express_type,agreement } = data
        if (!express_type) {
          data.express_type = ['0']
        }
        this.defaultMsg2 = agreement
        console.log(data)
      }
    },
    handleClipboard(text, event) {
      clipboard(text, event)
    },
    uploadFileChange(files) {
      const { currentRow: [file_path] } = files
      if (file_path) {
        this.formFormatData.formData.submit.value = file_path
      } else {
        this.$message.error('请选择链接~!')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.merchant-setting {
    .table-raido-header {
        background: #f2f2f2;
        padding: 10px;
        font-weight: 700;
        color: #909399;
    }

    .table-raido-body {
        padding: 10px;
        line-height: 24px;
        border-bottom: 1px solid rgb(235, 238, 245);
    }

    .table-left {
        width: 50%;
    }

    .table-mid {
        width: 50%;
    }

    /deep/ .gc-append-box .el-input__inner {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }

    /deep/ .gc-append-box .el-input-number {
        width: 100px;
    }

    /deep/ .gc-append-box .el-input-number .el-input {
        width: 100px;
    }

    .gc-append {
        height: 32px;
        padding: 0 13px;
        text-align: center;
        line-height: 32px;
        background: #f5f7fa;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        border-right-color: transparent;
        border-left-color: transparent;
        color: #909399;
    }

    .gc-append-right {
        border-right-color: #dcdfe6;
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px;
    }

    .gc-append-left {
        border-left-color: #dcdfe6;
        border-bottom-left-radius: 4px;
        border-top-left-radius: 4px;
    }

    .link-box {
        background: #e8effc;
        border: 0;
        width: 290px;
        height: 28px;
        border-radius: 3px;
        padding-left: 18px;
        cursor: pointer;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}
</style>
